<script setup lang="ts">
import { reactive } from 'vue';

const props = defineProps<{
    ujt: any;
}>();
const { $fn, $dbwork, $global } = props.ujt;
const tmpData: any = reactive({
    str: 'string',
    num: 123,
})
</script>

<template>
    <h1>软键盘测试</h1>
    <div v-keyboard="{
        ujt, style: {
            area: { width: '100%', height: '100%' },
            main: {
                width: '600px', height: '200px',
                transform: `translate(calc(100% - 300px), calc(100% - 100px))`
            }
        }
    }">
        <div>
            {{ tmpData }}||{{ $global.sys?.onkeyboard }}||{{ $global.keyboard.isshow }}
        </div>
        <div>
            字符串输入：<input type="text" v-model="tmpData.str">
            数字输入：<input type="number" v-model="tmpData.num">
        </div>
    </div>
    <div class="as-im-input">
        <AsKeyBoardBottom :ujt="ujt" v-show="$global.keyboard.isshow" v-if="$global.sys?.onkeyboard"></AsKeyBoardBottom>
    </div>
</template>

<style scoped lang="scss">
.as-im-input {
    position: fixed;
    top: 0;
    left: 0;
}
</style>
